<template>
  <div class="EditOrganizationPerform">
    <el-dialog right title="用户管理" :visible.sync="dialogVisible" @open="dialogOpen">
      <div class="dialog-body">
        <div class="body-header">
          <span>部门：{{organization.name}}</span>
        </div>
        <div class="body-content">
          <el-form>
            <el-form-item label="机构名称：">
              <el-input placeholder="请输入登录名" class="addUser-input" v-model="organizationName" maxlength="15"></el-input>
              <span class="must-mark">*</span>
            </el-form-item>
            <el-form-item label="机构编号：">
              <el-input placeholder="请输入工号" class="addUser-input" v-model="organizationSN" maxlength="15"></el-input>
            </el-form-item>
            <el-form-item label="英文名称：">
              <el-input placeholder="请输入姓名" class="addUser-input" v-model="enName" maxlength="15"></el-input>
            </el-form-item>
            <el-form-item label="中文名称：">
              <el-input placeholder="请输入手机号" class="addUser-input" v-model="cnName" maxlength="11"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { updateOrganization, postOperationLogs } from "@/api/apiManagement";

export default {
  name: "EditOrganizationPerform",
  props: {
    organization: {
      type: Object,
      required: true
    }
  },

  data() {
    return {
      dialogVisible: false,
      organizationName: "",
      organizationSN: "",
      enName: "",
      cnName: "",
      organizationId: ""
    };
  },
  created() {},
  mounted() {},
  methods: {
    isShowDia(isVisible) {
      let self = this;
      self.dialogVisible = isVisible;
    },
    dialogOpen() {
      this.reset_data();
      this.organizationName = this.organization.name;
      this.organizationSN = this.organization.sn;
      this.enName = this.organization.enName;
      this.cnName = this.organization.cnName;
      this.organizationId = this.organization.id;
    },
    confirm() {
      if (this.organizationName.length <= 0) {
        this.$message.error("请输入机构名称");
        return;
      }
      let parm = {
        cnName: this.cnName,
        enName: this.enName,
        name: this.organizationName,
        sn: this.organizationSN
      };
      updateOrganization(parm, this.organizationId)
        .then(response => {
          this.setOperationLogs("修改-组织-" + this.organizationName);
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.$emit("change", "click");
          this.dialogVisible = false;
        })
        .catch(() => {});
    },
    reset_data() {
      this.organizationName = "";
      this.organizationSN = "";
      this.enName = "";
      this.cnName = "";
      this.organizationId = "";
    },
    // 添加日志管理
    setOperationLogs(content) {
      var parm = {
        content: content,
        deviceId: localStorage.getItem("ydRobot_device_id"),
        type: 0
      };
      postOperationLogs(parm)
        .then(response => {})
        .catch(() => {});
    }
  }
};
</script>
<style>
/* .EditOrganizationPerform span,
.EditOrganizationPerform li,
.EditOrganizationPerform input,
.EditOrganizationPerform label {
    color: black
} */

.EditOrganizationPerform .el-dialog {
  background-color: rgb(215, 239, 236);
  width: 50%;
  min-width: 480px;
  padding: 0px 5px 5px;
  overflow: hidden;
}
.EditOrganizationPerform .el-dialog__body {
  border: 1px solid #90e8c6;
  border-bottom: none;
  background-color: white;
  padding: 0px;
}
.EditOrganizationPerform .el-dialog__header {
  padding: 0px 5px;
}
.EditOrganizationPerform .el-dialog__header .el-dialog__title {
  font-size: 13px;
}
.EditOrganizationPerform .el-dialog__headerbtn {
  top: 3px;
  right: 10px;
}
.EditOrganizationPerform .dialog-body .body-header {
  padding: 5px 20px;
}
.EditOrganizationPerform .dialog-body .body-header span {
  display: block;
  line-height: 40px;
  border-bottom: solid 1px #bababa;
  font-weight: bolder;
}

.EditOrganizationPerform .right-operation .el-form-item__label {
  line-height: 26px;
  float: left;
}
.EditOrganizationPerform .right-operation .el-form-item__content {
  /* width: 200px; */
  margin-left: 5px !important;
  line-height: 26px;
  float: left;
}
.EditOrganizationPerform .body-content {
  padding-left: 30px;
  overflow: hidden;
}
.EditOrganizationPerform .body-content .must-mark {
  color: red;
  font-size: 24px;
  margin-top: 2px;
  line-height: 20px;
  vertical-align: middle;
  display: inline-block;
}
.EditOrganizationPerform .body-content .el-form-item .el-form-item__label {
  width: 110px;
}
.EditOrganizationPerform .body-content .addUser-input {
  width: 210px;
  height: 27px;
}
.EditOrganizationPerform .body-content .addUser-input .el-input__inner {
  height: 26px;
  line-height: 24px;
  border: 1px solid rgb(202, 231, 238);
}
.EditOrganizationPerform .el-dialog__footer {
  border: 1px solid #90e8c6;
  background-color: #f1f1f1;
  border-top: 1px solid #d9d9d9;
  padding: 0px 5px 5px;
}
.EditOrganizationPerform .dialog-footer .el-button {
  padding: 5px 25px;
  margin-top: 5px;
  font-size: 13px;
}
</style>

